<html xmlns:th="http://www.thymeleaf.org">
<head>
<style>
.betting-order-details-dialog {
	max-width: 100%;
	width: 50%;
}

.betting-order-details-dialog .modal-body {
	height: 450px;
	overflow: auto;
}

.betting-order-details-dialog .modal-title span {
	padding-left: 10px;
	color: #E37D23;
}
</style>
</head>

<body>
	<div id="betting-order-details-modal" v-cloak>
		<div v-show="showBettingOrderDetailsFlag">
			<div class="modal-mask">
				<div class="modal-wrapper">
					<div class="modal-dialog betting-order-details-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">
									投注订单详情<span>订单号:{{bettingOrderDetails.orderNo}}</span>
								</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="showBettingOrderDetailsFlag = false">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="form-details-summary-title">订单摘要</div>
								<div class="row">
									<div class="col-sm-6 form-details-item">
										<label>投注用户:</label> <span>{{bettingOrderDetails.userName}}</span>
									</div>
									<div class="col-sm-6 form-details-item">
										<label>奖期:</label> <span>{{bettingOrderDetails.gameName}} 第{{bettingOrderDetails.issueNum}}期</span>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6 form-details-item">
										<label>投注模式:</label> <span>{{bettingOrderDetails.baseAmount}}元</span>
									</div>
									<div class="col-sm-6 form-details-item">
										<label>投注倍数:</label> <span>{{bettingOrderDetails.multiple}}</span>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6 form-details-item">
										<label>单倍注数:</label> <span>{{bettingOrderDetails.totalBettingCount}}</span>
									</div>
									<div class="col-sm-6 form-details-item">
										<label>总金额:</label> <span>{{bettingOrderDetails.totalBettingAmount}}元</span>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6 form-details-item">
										<label>投注时间:</label> <span>{{bettingOrderDetails.bettingTime}}</span>
									</div>
									<div class="col-sm-6 form-details-item">
										<label>中奖金额:</label> <span class="form-details-item-highlight">{{bettingOrderDetails.totalWinningAmount}}元</span>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6 form-details-item">
										<label>订单状态:</label> <span>{{bettingOrderDetails.stateName}}</span>
									</div>
									<div class="col-sm-6 form-details-item">
										<label>开奖号码:</label> <span class="form-details-item-highlight">{{bettingOrderDetails.lotteryNum}}</span>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6 offset-md-6 form-details-item">
										<label>订单盈亏:</label> <span class="form-details-item-highlight">{{bettingOrderDetails.totalProfitAndLoss}}元</span>
									</div>
								</div>
								<div class="form-details-summary-title" style="">订单明细</div>
								<table class="table table-sm form-details-table">
									<thead>
										<tr>
											<th>玩法</th>
											<th>投注内容</th>
											<th>投注注数</th>
											<th>投注金额</th>
											<th>奖金</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="bettingRecord in bettingOrderDetails.bettingRecords">
											<td>{{bettingRecord.gamePlayName}}</td>
											<td>{{bettingRecord.selectedNo}}</td>
											<td>{{bettingRecord.bettingCount}}</td>
											<td class="form-details-item-highlight">{{bettingRecord.bettingAmount}}</td>
											<td>{{bettingRecord.winningAmount}}</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-danger btn-sm" v-show="bettingOrderDetails.cancelOrderFlag" v-on:click="cancelOrder(bettingOrderDetails.id)">撤单</button>
								<button type="button" class="btn btn-sm" v-on:click="showBettingOrderDetailsFlag = false">返回</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var bettingOrderDetailsModal = new Vue({
			el : '#betting-order-details-modal',
			data : {
				showBettingOrderDetailsFlag : false,
				bettingOrderDetails : {}
			},
			computed : {},
			created : function() {
			},
			methods : {
				loadAndShowBettingOrderDetails : function(id) {
					var that = this;
					that.$http.get('/betting/findBettingOrderDetails', {
						params : {
							id : id
						}
					}).then(function(res) {
						that.bettingOrderDetails = res.body.data;
						that.showBettingOrderDetailsFlag = true;
					});
				},

				cancelOrder : function(orderId) {
					var that = this;
					layer.confirm('确定要撤单吗?', {
						icon : 7,
						title : '提示'
					}, function(index) {
						layer.close(index);
						that.$http.get('/betting/cancelOrder', {
							params : {
								orderId : orderId
							}
						}).then(function(res) {
							layer.alert('操作成功!', {
								icon : 1,
								time : 3000,
								shade : false
							});
							that.loadAndShowBettingOrderDetails(orderId);
						});
					});
				}
			}
		});
	</script>
</body>
</html>
